<!DOCTYPE>
<html>
<head>
    <title>login</title>
    <script src="./js/jquery-1.12.3.min.js"></script>

    <style>
        /* 方法1：设置textarea合适的宽高 */
        #jsonTextarea {
            float: left;
            margin-right: 20px;
            width: 40%;
            height: 70vh;
            outline: none;
            padding: 5px;
        }

        /* 方法2：自定义高亮样式 */
        #jsonPre {
            float: left;
            width: 40%;
            height: 70vh;
            outline: 1px solid #ccc;
            padding: 5px;
            overflow: scroll;
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: red;
        }
    </style>


</head>
<body>
<textarea id="jsonTextarea" readonly></textarea>
<pre id="jsonPre"></pre>
</body>


<script>
    var data = '{"固定车管理ID":3021296235315269,"车场ID":"32884934977781765","车辆类型ID":2885970431836229,"缴费类型(1临时车 2月租车 3储值车 4免费车)":2,"车牌号":"闽A11111","有效开始时间":"2021-08-06 00:00:01","有效结束时间":"2022-03-06 00:00:01","车主姓名":"车主姓名修改","车主电话":"13803546111","车位编码":"1228333","房号":"12333","月租车-车位组启用状态 true:开启 false:关闭":true,"月组车-车位组车位数":3,"备注":"备注修改","车位组绑定的车辆":["闽A11112","闽A11113","闽A11114","渝C92131","渝E21231","渝E21232","渝E21233","渝E21234","渝E21235","渝E21236","渝E21237","渝E21238","渝E21239","渝E21211","渝E21212","渝E21313","渝E21314","渝E21324","渝E21327","渝E21321","渝E21316","渝E11316","渝E14316","渝U31311","渝U31313","渝U31314","渝U31315","渝U31316","渝U31317"]}';
    // 方法1：textarea + JSON.stringify
    // function parse1(str) {
    //     return JSON.stringify(JSON.parse(str), null, "\t");
    // }
    // $('#jsonTextarea').text(parse1(data));


    {

    }
    // 方法2：pre + JSON.stringify
    function parse2(str) {
        // 设置缩进为2个空格
        str = JSON.stringify(JSON.parse(str), null, 2);
        str = str
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
        return str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
    $('#jsonPre').html(parse2(data));
</script>
</html>
